<template>
    <div>
        <div class="title">
            安卓推送<span>不知道url点击右边按钮</span>
            <el-button type="primary" @click="dialogVisible = true" style="margin-left: 20px;">查看用户列表</el-button>
        </div>

        <!-- 用户列表弹窗 -->
        <el-dialog title="用户列表" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
            <div class="filter-container">
                <el-select v-model="filterBrand" placeholder="选择品牌" clearable style="width: 200px; margin-right: 20px;">
                    <el-option v-for="item in brandOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="filterApp" placeholder="选择所属app" clearable
                    style="width: 200px; margin-right: 20px;">
                    <el-option v-for="item in appOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="filterActivity" placeholder="活跃状态" clearable
                    style="width: 200px; margin-right: 20px;">
                    <el-option v-for="item in activityOptions" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-input v-model="filterRemark" placeholder="搜索备注" clearable style="width: 200px; margin-right: 20px;">
                </el-input>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button @click="handleReset">重置</el-button>
            </div>
            <el-table :data="userList" style="width: 100%; margin-top: 20px;" @selection-change="handleSelectionChange"
                ref="userTable">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="push_id" label="推送ID" width="180">
                </el-table-column>
                <el-table-column prop="appname" label="所属app" width="180">



                </el-table-column>
                <el-table-column prop="nickname" label="用户名称" width="180">
                </el-table-column>
                <el-table-column prop="brand" label="品牌" width="120">
                </el-table-column>
                <el-table-column prop="did" label="设备ID" width="180">
                </el-table-column>
                <el-table-column prop="remark" label="备注" width="180">
                </el-table-column>
                <el-table-column prop="update_time" label="最后更新时间">
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleConfirm">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 使用 ElementUI 的表单组件 -->
        <div class="content-box">
            <!-- 为表单添加 rules 属性绑定校验规则 -->
            <el-form ref="pushForm" class="forom-box" :model="pushForm" :rules="rules" label-width="200px">
                <el-form-item label="选择推送app" prop="appname">
                    <el-select v-model="pushForm.appname" placeholder="请选择app" style="width: 100%;">
                        <el-option v-for="item in appOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="推送用户cid" prop="title">
                    <el-input v-model="pushForm.clientid" placeholder="可不填，如要测试可填,(为空就是全部用户)"></el-input>
                </el-form-item>
                <!-- 标题输入框 -->
                <el-form-item label="推送标题" prop="title">
                    <el-input v-model="pushForm.title" placeholder="请输入推送标题"></el-input>
                </el-form-item>
                <!-- 内容输入框 -->
                <el-form-item label="推送内容" prop="content">
                    <el-input type="textarea" v-model="pushForm.content" placeholder="请输入推送内容"></el-input>
                </el-form-item>
                <el-form-item label="推送url" prop="url">
                    <el-input type="textarea" v-model="pushForm.url"
                        placeholder="请输入url，请认真检查参数，不知道的点击按钮，或者问前端阿桥"></el-input>
                </el-form-item>
                <!-- 推送按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">推送</el-button>
                    <el-button type="success" @click="onSubmit1">在线推送</el-button>
                </el-form-item>
            </el-form>
            <div class="select-box">
                <el-button @click="pushForm.url = item.value" :type="item.type" v-for="item in helpList"
                    :key="item.value">
                    {{ item.label }}
                </el-button>
            </div>
        </div>
        <div class="moni-ios">
            <img src="@/assets/pushImage/mock-android.png" alt="">
            <div class="mock-box">
                <div class="mock-box-top">
                    <img src="@/assets/xqk.png" alt="">
                    <span>
                        星球客
                    </span>
                </div>
                <div class="mock-box-bottom">
                    <span>
                        {{ pushForm.title ? pushForm.title : '通知标题' }}
                    </span>
                    <span>
                        {{ pushForm.content ? pushForm.content : '通知内容' }}
                    </span>
                </div>
            </div>


            <div>
                <div class="push-chars">
                    <div style="width: 500px">

                        <pushData></pushData>


                    </div>

                    <div style="width: 500px">

                        <pushData1></pushData1>


                    </div>
                </div>

            </div>


        </div>
    </div>
</template>

<script>


import axios from 'axios';

import { getPushUserList, getPushUserListPid } from '@/api/push'

import pushData from '@/components/pushData/pushData.vue';
import pushData1 from '@/components/pushData/pushData-1.vue';

export default {
    data() {
        return {
            // 表单数据对象
            pushForm: {
                title: '这个赛事很精彩',
                content: '快来看看',
                url: '',
                clientid: '',
                appname: 'xqk' // 默认选择星球客
            },
            helpList: [
                {
                    label: '专家详情',
                    value: '/homePages/anchor_detail?id=请填写&type=1',
                    type: 'success'
                },
                {
                    label: '方案详情',
                    value: '/activityPages/details?id=请填写',
                    type: 'warning'
                },
                {
                    label: '赛事详情',
                    value: '/circlePages/hotFoot/hotFoot?match_id=请填写&num=0&p_url=&roomid=',
                    type: 'danger'
                }
            ],
            // 定义表单校验规则
            rules: {
                title: [
                    { required: true, message: '请输入推送标题', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请输入推送内容', trigger: 'blur' }
                ],
                url: [
                    { required: true, message: '请输入推送 url', trigger: 'blur' }
                ]
            },
            checkedBrand: 0,
            dialogVisible: false,
            userList: [], // 完整的用户列表
            filteredUserList: [], // 筛选后的用户列表
            filterBrand: '',
            filterActivity: '',
            filterApp: '',
            filterRemark: '',
            brandOptions: [
                { label: 'vivo', value: 'vivo' },
                { label: 'oppo', value: 'oppo' },
                { label: 'huawei', value: 'huawei' },
                { label: 'honor', value: 'honor' },
                { label: 'xiaomi', value: 'xiaomi' }
            ],
            activityOptions: [
                { label: '活跃', value: true },
                { label: '不活跃', value: false }
            ],
            appOptions: [
                { label: '星球客', value: 'xqk' },
                { label: '有球体育', value: 'yqty' },
                { label: '310大师', value: '310' }
            ],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            selectedUsers: [],
            pushPage: 1,
            maxPage: 1
        };
    },
    mounted() {
        this.getAllUserDid()
    },
    components: {
        pushData,
        pushData1
    },
    methods: {
        onSubmit1() {
            axios({
                method: 'post',
                url: 'https://beforai.zctj16888.com/push',
                header: {
                    'Content-Type': 'application/json'
                },
                data:  {
                    "title": this.pushForm.title,
                    "content": this.pushForm.content,
                    "url": this.pushForm.url
                }}).then(res => {
                    
                    this.$message.success('推送成功')

                    // if (res.data.data.errCode == 0) {
                    //     this.$message.success('推送成功')

                    // } else {
                    //     this.$message.error(`推送失败，原因是${res.data.data.errMsg}`)
                    // }

                }).catch(error => {
                    this.$message.error('推送失败')

                })
    },
    chunkArray(arr, chunkSize) {
        const result = [];
        for (let i = 0; i < arr.length; i += chunkSize) {
            result.push(arr.slice(i, i + chunkSize));
        }
        return result;
    },
    async getAllUserDid() {
        try {
            const response = await getPushUserList({
                appname: this.filterApp || '',
                brand: this.filterBrand || '',
                if_active: this.filterActivity !== '' ? this.filterActivity : '',
                remark: this.filterRemark || '',
                page: this.currentPage,
                pageSize: this.pageSize
            });

            if (response.data) {
                this.userList = response.data.data || [];
                this.total = response.data.total || 0;
            }
        } catch (error) {
            this.$message.error('获取用户列表失败');
            console.error(error);
        }
    },
    async onSubmit() {

        let cidArr = []

        let chunkedArray = []

        if (!this.pushForm.clientid) {

            const pres = await getPushUserListPid({
                appname: this.pushForm.appname,
            })

            chunkedArray = this.chunkArray(pres.data, 1000);

            console.log(chunkedArray)







        } else {

            cidArr = this.pushForm.clientid.split(',')

            chunkedArray = []
            chunkedArray[0] = cidArr



        }






        this.$refs.pushForm.validate(async (valid) => {
            if (valid) {


                if (this.pushForm.appname == 'xqk') {

                    chunkedArray.forEach(item => {


                        axios({
                            method: 'post',
                            url: 'https://fc-mp-f8b10b3a-c342-4d0d-8aae-6014150bf66f.next.bspapp.com/xqkAllPush',
                            header: {
                                'Content-Type': 'application/json'
                            },
                            data: {
                                clientid: item,
                                title: this.pushForm.title,
                                econtent: this.pushForm.content,
                                url: this.pushForm.url,
                                appname: this.pushForm.appname
                            }
                        }).then(res => {
                            let str = '';



                            res.data.forEach(item => {

                                str += `${item.name}推送${item.result.errCode == 0 ? '成功' : '失败'}           `

                            })

                            this.$message.success(str)

                            // if (res.data.data.errCode == 0) {
                            //     this.$message.success('推送成功')

                            // } else {
                            //     this.$message.error(`推送失败，原因是${res.data.data.errMsg}`)
                            // }

                        }).catch(error => {
                            this.$message.error('推送失败')

                        })

                    })


                } else {

                    chunkedArray.forEach(item => {


                        axios({
                            method: 'post',
                            url: 'https://fc-mp-f8b10b3a-c342-4d0d-8aae-6014150bf66f.next.bspapp.com/yqtyAllPush',
                            header: {
                                'Content-Type': 'application/json'
                            },
                            data: {
                                clientid: item,
                                title: this.pushForm.title,
                                econtent: this.pushForm.content,
                                url: this.pushForm.url,
                                appname: this.pushForm.appname
                            }
                        }).then(res => {
                            let str = '';



                            res.data.forEach(item => {

                                str += `${item.name}推送${item.result.errCode == 0 ? '成功' : '失败'}           `

                            })

                            this.$message.success(str)

                            // if (res.data.data.errCode == 0) {
                            //     this.$message.success('推送成功')

                            // } else {
                            //     this.$message.error(`推送失败，原因是${res.data.data.errMsg}`)
                            // }

                        }).catch(error => {
                            this.$message.error('推送失败')

                        })

                    })

                }








            } else {
                // 校验失败，给出提示
                console.log('表单校验不通过');
                return false;
            }
        });
    },
    handleClose() {
        this.dialogVisible = false;
    },
    handleSelectionChange(selection) {
        this.selectedUsers = selection;
    },
    handleConfirm() {
        if (this.selectedUsers.length > 0) {
            this.pushForm.clientid = this.selectedUsers.map(user => user.push_id).join(',');
        }

        console.log(this.pushForm.clientid)

        this.dialogVisible = false;
    },
    handleSizeChange(val) {
        this.pageSize = val;
        this.getAllUserDid();
    },
    handleCurrentChange(val) {
        this.currentPage = val;
        this.getAllUserDid();
    },
    handleSearch() {
        this.currentPage = 1;
        this.getAllUserDid();
    },
    handleReset() {
        this.filterBrand = '';
        this.filterApp = '';
        this.filterActivity = '';
        this.filterRemark = '';
        this.currentPage = 1;
        this.getAllUserDid();
    },
},
watch: {
    filterBrand() {
        this.currentPage = 1;
        this.getAllUserDid();
    },
    filterActivity() {
        this.currentPage = 1;
        this.getAllUserDid();
    },
    filterApp() {
        this.currentPage = 1;
        this.getAllUserDid();
    },
    filterRemark() {
        this.currentPage = 1;
        this.getAllUserDid();
    }
}
};
</script>

<style scoped>
/* 原样式代码保持不变 */
.title {
    width: 100%;
    /* height: 200px; */
    padding-left: 100px;
    padding-top: 50px;
    font-size: 25px;
    margin-bottom: 20px;
}

.title span {
    font-size: 12px;
    color: red;
    margin-left: 10px;
}

.content-box {
    width: 100%;
    display: flex;
    align-items: center;

}

.forom-box {
    flex: 1;
    margin-right: 100px;
    max-width: 600px;
}

.select-box {
    display: flex;
    flex-direction: column;
    width: 250px;
    align-items: center;

}

.select-box>button {
    margin-bottom: 20px;
    margin-left: 0px;
    width: 180px;
}

.moni-ios {
    margin-left: 100px;
    position: relative;
    display: flex;

}

.moni-ios>img {
    width: 200px;
    height: 384px;

}

.mock-box {
    width: 150px;
    background-color: #ffffff;
    position: absolute;
    z-index: 1;
    top: 145px;
    left: 15px;
    /* height: 70px; */
    border-radius: 10px;

}

.mock-box-top {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 12px;
    margin-top: 10px;
}

.mock-box-bottom {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    padding-left: 10px;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: none;
}

.mock-box-bottom span {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: none;
}

.mock-box-bottom span:nth-child(1) {
    font-weight: bold;
    margin-bottom: 1px;
}

.mock-box-top>img {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    margin: 0px 5px 0px 10px;
}

.select-logos-item>img {
    width: 50px;
    height: 50px;
    margin-right: 10px;

}

.select-logos-item {
    display: flex;
    align-items: center;
    margin-right: 20px;
    /* border: 2px solid #979797; */
    padding: 4px 20px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 5px 5px 10px rgb(197, 197, 197);
    transition: all .3s;
}

.select-logos-item:hover {
    box-shadow: 5px 5px 10px rgb(159, 211, 241);
    transform: scale(1.1);
}

.select-logos-item.active {
    box-shadow: 5px 5px 10px rgb(159, 211, 241);
}

.select-logos {
    display: flex;
    align-items: center;
    margin-left: 100px;
    margin-bottom: 50px;
}

.pagination-container {
    margin-top: 20px;
    text-align: right;
}

.filter-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.push-chars {
    display: flex;
    align-items: center;
}

/* 可以在这里添加自定义样式 */
</style>